<template name='skeleton'>
  <view class='sk-container'>
    <view class='container container'>
      <view is='pages/index/componets/CustomNavbar'>
        <view class='navbar CustomNavbar--navbar' style='padding-top:20px'>
          <view class='logo CustomNavbar--logo'>
            <text class='logo-title CustomNavbar--logo-title sk-transparent sk-text-14-2857-180 sk-text'>嘉会医疗</text>
            <text class='logo-text CustomNavbar--logo-text sk-transparent sk-text-3-3333-811 sk-text'>快速 · 便捷 ·
              轻松
            </text>
          </view>
          <view class='search CustomNavbar--search'>
            <text
              class='icon-search CustomNavbar--icon-search sk-transparent sk-text-14-2857-845 sk-text sk-pseudo sk-pseudo-circle'>
              输入医生关键字进行搜索
            </text>
            <text class='icon-scan CustomNavbar--icon-scan sk-pseudo sk-pseudo-circle'></text>
          </view>
        </view>
      </view>
      <scroll-view class='scroll-view scroll-view' enable-back-to-top='true'>
        <view is='components/HosSwiper'>
          <view class='carousel HosSwiper--carousel'>
            <view circular='true' interval='3000' current='0' autoplay='false'>
              <view
                style='position: absolute; width: 100%; height: 100%; transform: translate(0%, 0px) translateZ(0px);'>
                <navigator class='navigator HosSwiper--navigator' hover-class='none'>
                  <image class='image HosSwiper--image sk-image' mode='aspectFill'></image>
                </navigator>
              </view>
            </view>
            <view class='indicator HosSwiper--indicator'>
              <text class='dot HosSwiper--dot active HosSwiper--active'></text>
              <text class='dot HosSwiper--dot'></text>
              <text class='dot HosSwiper--dot'></text>
              <text class='dot HosSwiper--dot'></text>
              <text class='dot HosSwiper--dot'></text>
            </view>
          </view>
        </view>
        <view is='pages/index/componets/CategoryPanel'>
          <view class='category CategoryPanel--category'>
            <navigator class='category-item CategoryPanel--category-item' hover-class='none'>
              <image class='icon CategoryPanel--icon sk-image'></image>
              <text class='text CategoryPanel--text sk-transparent sk-text-14-2857-991 sk-text'>内科</text>
            </navigator>
            <navigator class='category-item CategoryPanel--category-item' hover-class='none'>
              <image class='icon CategoryPanel--icon sk-image'></image>
              <text class='text CategoryPanel--text sk-transparent sk-text-14-2857-760 sk-text'>外科</text>
            </navigator>
            <navigator class='category-item CategoryPanel--category-item' hover-class='none'>
              <image class='icon CategoryPanel--icon sk-image'></image>
              <text class='text CategoryPanel--text sk-transparent sk-text-14-2857-598 sk-text'>儿科</text>
            </navigator>
            <navigator class='category-item CategoryPanel--category-item' hover-class='none'>
              <image class='icon CategoryPanel--icon sk-image'></image>
              <text class='text CategoryPanel--text sk-transparent sk-text-14-2857-734 sk-text'>妇科</text>
            </navigator>
            <navigator class='category-item CategoryPanel--category-item' hover-class='none'>
              <image class='icon CategoryPanel--icon sk-image'></image>
              <text class='text CategoryPanel--text sk-transparent sk-text-14-2857-562 sk-text'>耳鼻侯科</text>
            </navigator>
            <navigator class='category-item CategoryPanel--category-item' hover-class='none'>
              <image class='icon CategoryPanel--icon sk-image'></image>
              <text class='text CategoryPanel--text sk-transparent sk-text-14-2857-830 sk-text'>口腔科</text>
            </navigator>
            <navigator class='category-item CategoryPanel--category-item' hover-class='none'>
              <image class='icon CategoryPanel--icon sk-image'></image>
              <text class='text CategoryPanel--text sk-transparent sk-text-14-2857-312 sk-text'>皮肤科</text>
            </navigator>
            <navigator class='category-item CategoryPanel--category-item' hover-class='none'>
              <image class='icon CategoryPanel--icon sk-image'></image>
              <text class='text CategoryPanel--text sk-transparent sk-text-14-2857-159 sk-text'>其它</text>
            </navigator>
          </view>
        </view>
        <view is='pages/index/componets/HealthNewsPanel' style='margin-top:11px'>
          <view is='node-modules/@dcloudio/uni-ui/lib/uni-section/uni-section'
                class='uni-title HealthNewsPanel--uni-title data-v-b076b79a HealthNewsPanel--data-v-b076b79a'>
            <view class='uni-section section--uni-section'>
              <view class='uni-section-header section--uni-section-header'>
                <view class='uni-section-header__content section--uni-section-header__content'>
                  <text
                    class='uni-section__content-title section--uni-section__content-title sk-transparent sk-text-14-2857-86 sk-text'
                    style='font-size:18px;color:#000'>健康头条
                  </text>
                  <text
                    class='uni-section-header__content-sub section--uni-section-header__content-sub sk-transparent sk-text-14-2857-766 sk-text'
                    style='font-size:12px;color:#999'>科普健康知识不再是小白
                  </text>
                </view>
                <view class='uni-section-header__slot-right section--uni-section-header__slot-right'>
                  <view is='node-modules/@dcloudio/uni-ui/lib/uni-icons/uni-icons'
                        class='data-v-b076b79a HealthNewsPanel--data-v-b076b79a'>
                    <text class='uni-icons icons--uni-icons uniui-right icons--uniui-right sk-pseudo sk-pseudo-circle'
                          style='color:#999;font-size:18px'></text>
                  </view>
                </view>
              </view>
              <view class='uni-section-content section--uni-section-content' style='padding:'>
                <view
                  class='healthFather HealthNewsPanel--healthFather data-v-b076b79a HealthNewsPanel--data-v-b076b79a'>
                  <view
                    class='healthMiddle HealthNewsPanel--healthMiddle data-v-b076b79a HealthNewsPanel--data-v-b076b79a'
                    style='margin-top:8px;height:30px'>
                    <text
                      class='newStyle HealthNewsPanel--newStyle data-v-b076b79a HealthNewsPanel--data-v-b076b79a sk-transparent sk-text-27-2727-587 sk-text'
                      style='position: relative; right: 8px; background-position-x: 50%;'>NEW
                    </text>
                    <swiper vertical='true' autoplay='false'
                            class='swiper HealthNewsPanel--swiper data-v-b076b79a HealthNewsPanel--data-v-b076b79a'
                            duration='300' interval='5000' current='0'>
                      <swiper-item class='item HealthNewsPanel--item data-v-b076b79a HealthNewsPanel--data-v-b076b79a'
                                   style='position: absolute; width: 100%; height: 100%; transform: translate(0px, 0%) translateZ(0px);'>
                        <text
                          class='data-v-b076b79a HealthNewsPanel--data-v-b076b79a sk-transparent sk-text-14-2857-242 sk-text'>
                          治疗失眠是中医好还是西医好
                        </text>
                      </swiper-item>
                      <swiper-item class='item HealthNewsPanel--item data-v-b076b79a HealthNewsPanel--data-v-b076b79a'
                                   style='position: absolute; width: 100%; height: 100%; transform: translate(0px, 100%) translateZ(0px);'>
                        <text
                          class='data-v-b076b79a HealthNewsPanel--data-v-b076b79a sk-transparent sk-text-14-2857-704 sk-text'>
                          全球变暖背景下，冬季防寒更不可放松
                        </text>
                      </swiper-item>
                      <swiper-item class='item HealthNewsPanel--item data-v-b076b79a HealthNewsPanel--data-v-b076b79a'
                                   style='position: absolute; width: 100%; height: 100%; transform: translate(0px, 200%) translateZ(0px);'>
                        <text
                          class='data-v-b076b79a HealthNewsPanel--data-v-b076b79a sk-transparent sk-text-14-2857-791 sk-text'>
                          发挥特色优势 焕发中医药新活力
                        </text>
                      </swiper-item>
                    </swiper>
                  </view>
                  <text
                    class='moreMsg HealthNewsPanel--moreMsg data-v-b076b79a HealthNewsPanel--data-v-b076b79a sk-transparent sk-text-14-2857-551 sk-text'
                    style='background-position-x: 50%;'>查看更多健康咨询
                  </text>
                </view>
              </view>
            </view>
          </view>
        </view>
        <view is='pages/index/componets/HotDocters' style='margin-top:11px'>
          <view class='page HotDocters--page data-v-8fe934ee HotDocters--data-v-8fe934ee'>
            <view is='node-modules/@dcloudio/uni-ui/lib/uni-section/uni-section'
                  class='uni-title HotDocters--uni-title data-v-8fe934ee HotDocters--data-v-8fe934ee'>
              <view class='uni-section section--uni-section'>
                <view class='uni-section-header section--uni-section-header'>
                  <view class='uni-section-header__content section--uni-section-header__content'>
                    <text
                      class='uni-section__content-title section--uni-section__content-title sk-transparent sk-text-14-2857-583 sk-text'
                      style='font-size:18px;color:#000'>热门医生
                    </text>
                    <text
                      class='uni-section-header__content-sub section--uni-section-header__content-sub sk-transparent sk-text-14-2857-701 sk-text'
                      style='font-size:12px;color:#999'>多科室千余医生任意选
                    </text>
                  </view>
                  <view class='uni-section-header__slot-right section--uni-section-header__slot-right'>
                    <view is='node-modules/@dcloudio/uni-ui/lib/uni-icons/uni-icons'
                          class='data-v-8fe934ee HotDocters--data-v-8fe934ee'>
                      <text class='uni-icons icons--uni-icons uniui-right icons--uniui-right sk-pseudo sk-pseudo-circle'
                            style='color:#999;font-size:18px'></text>
                    </view>
                  </view>
                </view>
                <view class='uni-section-content section--uni-section-content' style='padding:'></view>
              </view>
            </view>
            <scroll-view class='scroll-view_H HotDocters--scroll-view_H data-v-8fe934ee HotDocters--data-v-8fe934ee'
                         scroll-left='120' scroll-x='true'>
              <navigator
                class='docterItem HotDocters--docterItem scroll-view-item_H HotDocters--scroll-view-item_H data-v-8fe934ee HotDocters--data-v-8fe934ee'>
                <view class='picture HotDocters--picture data-v-8fe934ee HotDocters--data-v-8fe934ee'>
                  <image class='data-v-8fe934ee HotDocters--data-v-8fe934ee sk-image'></image>
                </view>
              </navigator>
              <navigator
                class='docterItem HotDocters--docterItem scroll-view-item_H HotDocters--scroll-view-item_H data-v-8fe934ee HotDocters--data-v-8fe934ee'>
                <view class='picture HotDocters--picture data-v-8fe934ee HotDocters--data-v-8fe934ee'>
                  <image class='data-v-8fe934ee HotDocters--data-v-8fe934ee sk-image'></image>
                </view>
              </navigator>
              <navigator
                class='docterItem HotDocters--docterItem scroll-view-item_H HotDocters--scroll-view-item_H data-v-8fe934ee HotDocters--data-v-8fe934ee'>
                <view class='picture HotDocters--picture data-v-8fe934ee HotDocters--data-v-8fe934ee'>
                  <image class='data-v-8fe934ee HotDocters--data-v-8fe934ee sk-image'></image>
                </view>
              </navigator>
            </scroll-view>
          </view>
        </view>
      </scroll-view>
    </view>
  </view>
</template>

<style scoped lang='scss'>
/* #ifdef H5 || APP-PLUS */
/* 修复 H5 端骨架屏样式异常 */
/* 原因：H5 端样式自动开启 scoped 隔离，导致骨架屏的基础样式被隔离 */
@import '../styles/categoryPanel.scss';
//@import '../styles/category.scss';
//@import '../styles/hot.scss';
@import '@/components/styles/HosSwiper.scss';
/* #endif */
.sk-transparent {
  color: transparent !important;
}

.sk-text-14-2857-180 {
  background-image: linear-gradient(transparent 14.2857%, #EEEEEE 0%, #EEEEEE 85.7143%, transparent 0%) !important;
  background-size: 100% 58.3333rpx;
  position: relative !important;
}

.sk-text {
  background-origin: content-box !important;
  background-clip: content-box !important;
  background-color: transparent !important;
  color: transparent !important;
  background-repeat: repeat-y !important;
}

.sk-text-3-3333-811 {
  background-image: linear-gradient(transparent 3.3333%, #EEEEEE 0%, #EEEEEE 96.6667%, transparent 0%) !important;
  background-size: 100% 27.1739rpx;
  position: relative !important;
}

.sk-text-14-2857-845 {
  background-image: linear-gradient(transparent 14.2857%, #EEEEEE 0%, #EEEEEE 85.7143%, transparent 0%) !important;
  background-size: 100% 38.0435rpx;
  position: relative !important;
}

.sk-text-14-2857-991 {
  background-image: linear-gradient(transparent 14.2857%, #EEEEEE 0%, #EEEEEE 85.7143%, transparent 0%) !important;
  background-size: 100% 35.5072rpx;
  position: relative !important;
}

.sk-text-14-2857-760 {
  background-image: linear-gradient(transparent 14.2857%, #EEEEEE 0%, #EEEEEE 85.7143%, transparent 0%) !important;
  background-size: 100% 35.5072rpx;
  position: relative !important;
}

.sk-text-14-2857-598 {
  background-image: linear-gradient(transparent 14.2857%, #EEEEEE 0%, #EEEEEE 85.7143%, transparent 0%) !important;
  background-size: 100% 35.5072rpx;
  position: relative !important;
}

.sk-text-14-2857-734 {
  background-image: linear-gradient(transparent 14.2857%, #EEEEEE 0%, #EEEEEE 85.7143%, transparent 0%) !important;
  background-size: 100% 35.5072rpx;
  position: relative !important;
}

.sk-text-14-2857-562 {
  background-image: linear-gradient(transparent 14.2857%, #EEEEEE 0%, #EEEEEE 85.7143%, transparent 0%) !important;
  background-size: 100% 35.5072rpx;
  position: relative !important;
}

.sk-text-14-2857-830 {
  background-image: linear-gradient(transparent 14.2857%, #EEEEEE 0%, #EEEEEE 85.7143%, transparent 0%) !important;
  background-size: 100% 35.5072rpx;
  position: relative !important;
}

.sk-text-14-2857-312 {
  background-image: linear-gradient(transparent 14.2857%, #EEEEEE 0%, #EEEEEE 85.7143%, transparent 0%) !important;
  background-size: 100% 35.5072rpx;
  position: relative !important;
}

.sk-text-14-2857-159 {
  background-image: linear-gradient(transparent 14.2857%, #EEEEEE 0%, #EEEEEE 85.7143%, transparent 0%) !important;
  background-size: 100% 35.5072rpx;
  position: relative !important;
}

.sk-text-14-2857-86 {
  background-image: linear-gradient(transparent 14.2857%, #EEEEEE 0%, #EEEEEE 85.7143%, transparent 0%) !important;
  background-size: 100% 45.6522rpx;
  position: relative !important;
}

.sk-text-14-2857-766 {
  background-image: linear-gradient(transparent 14.2857%, #EEEEEE 0%, #EEEEEE 85.7143%, transparent 0%) !important;
  background-size: 100% 30.4348rpx;
  position: relative !important;
}

.sk-text-27-2727-587 {
  background-image: linear-gradient(transparent 27.2727%, #EEEEEE 0%, #EEEEEE 72.7273%, transparent 0%) !important;
  background-size: 100% 59.7826rpx;
  position: relative !important;
}

.sk-text-14-2857-242 {
  background-image: linear-gradient(transparent 14.2857%, #EEEEEE 0%, #EEEEEE 85.7143%, transparent 0%) !important;
  background-size: 100% 40.5797rpx;
  position: relative !important;
}

.sk-text-14-2857-704 {
  background-image: linear-gradient(transparent 14.2857%, #EEEEEE 0%, #EEEEEE 85.7143%, transparent 0%) !important;
  background-size: 100% 40.5797rpx;
  position: relative !important;
}

.sk-text-14-2857-791 {
  background-image: linear-gradient(transparent 14.2857%, #EEEEEE 0%, #EEEEEE 85.7143%, transparent 0%) !important;
  background-size: 100% 40.5797rpx;
  position: relative !important;
}

.sk-text-14-2857-551 {
  background-image: linear-gradient(transparent 14.2857%, #EEEEEE 0%, #EEEEEE 85.7143%, transparent 0%) !important;
  background-size: 100% 30.4348rpx;
  position: relative !important;
}

.sk-text-14-2857-583 {
  background-image: linear-gradient(transparent 14.2857%, #EEEEEE 0%, #EEEEEE 85.7143%, transparent 0%) !important;
  background-size: 100% 45.6522rpx;
  position: relative !important;
}

.sk-text-14-2857-701 {
  background-image: linear-gradient(transparent 14.2857%, #EEEEEE 0%, #EEEEEE 85.7143%, transparent 0%) !important;
  background-size: 100% 30.4348rpx;
  position: relative !important;
}

.sk-image {
  background: #EFEFEF !important;
}

.sk-pseudo::before, .sk-pseudo::after {
  background: #EFEFEF !important;
  background-image: none !important;
  color: transparent !important;
  border-color: transparent !important;
}

.sk-pseudo-rect::before, .sk-pseudo-rect::after {
  border-radius: 0 !important;
}

.sk-pseudo-circle::before, .sk-pseudo-circle::after {
  border-radius: 50% !important;
}

.sk-container {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: transparent;
}
</style>
